<template>
	<view class="content">
		<view>
			<u-image class="logo" width="250rpx" height="250rpx" :src="src" shape="circle"></u-image>
			<view class="zai-title text-shadow ">鑫玉建设OA管理系统</view>
		</view>
		<view>
			<u-form class="form" :model="form" ref="uForm" >
				<u-form-item label="账号" prop="username">
					<u-input class="u-border-bottom" v-model="form.username" placeholder="请输入账号"/>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input class="u-border-bottom" type="password" v-model="form.password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item>
					<u-checkbox-group>
						<u-checkbox v-model="form.recordPassword" name="record">记住密码</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u-form>
		</view>
		<view class="login_button">
			<u-button style="width: 400rpx;" @click="submit" type="primary">登录</u-button>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import userApi from '@/api/user.js'
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					recordPassword:false,//是否记住密码标志
				},
				rules: {
					username: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					password: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'blur'
					}]
				},
				src: 'http://139.186.161.126/img/logo.3e74dd1f.svg'
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						console.log('用户个人',this.$store.state.userInfo)
						userApi.login({
							username: this.form.username, 
							password: this.form.password
						}).then((res) => {
							if(res.data.code=='200'&&res.data.success){
								this.$store.commit('setToken', res.data.result.token)
								this.$store.commit('setUserInfo',{...res.data.result.userInfo,deptName:res.data.result.deptName})
								
								this.$Router.replaceAll({name:'index'})
								//记住密码
								if(this.form.recordPassword){
									uni.setStorageSync('formData',this.form);
								}else{
									uni.removeStorageSync('formData');
								}
							}else{
								this.$refs.uToast.show({
									title: '用户名或密码错误',
										type: 'error',
										// position:"top"
									})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			const tempData = uni.getStorageSync('formData')
			if(tempData){
				this.form = tempData
			}
			console.log("2323",!!tempData)
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.content{
			display: flex;
			flex-direction: column;
			justify-content: center;
	}
	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-top: 120rpx;
		margin-bottom: 50rpx;
	}
	.zai-title {
	   font-size: 48upx;
	   color: #000000;
	   text-align: center;
	   margin-bottom: 50rpx;
	}
	.form{
		display: flex;
		justify-content: center;
	}
	.login_button{
		width:750rpx;
		height:200rpx;
		margin-top:20rpx;
		display: flex;
		justify-content: center;
	}
</style>
